import CodeMirrorWrapper from '@/components/CodeMirrorWrapper';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import { Box, Grid, IconButton, Tooltip, Typography } from '@mui/material';
import { memo } from 'react';

/**
 * JSON结果显示组件
 */
const ResultSection = memo(({ 
    jsonResult, 
    handleCopyResult 
}: { 
    jsonResult: string; 
    handleCopyResult: () => void; 
}) => (
    <Grid item xs={12}>
        <Box sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            mb: 1
        }}>
            <Typography variant="h6">
                结果：
            </Typography>
            <Tooltip title="复制结果">
                <IconButton onClick={handleCopyResult} size="small">
                    <ContentCopyIcon />
                </IconButton>
            </Tooltip>
        </Box>
        <Box sx={{
            borderRadius: 1,
            overflow: 'auto',
        }}>
            <CodeMirrorWrapper
                label=""
                value={jsonResult}
                onChange={() => { }}
                height="auto"
                language="json"
                readOnly
            />
        </Box>
    </Grid>
));

export default ResultSection;